<template>
  <div class="element-opacity">
    <div class="row">
      <div style="flex: 1; width: 56px; font-size: 14px; color: #303233;">不透明度:</div>
      <Slider
        class="slider"
        :min="0"
        :max="100"
        :step="0.1"
        :value="opacity"
        @change="value => updateOpacity(value as number)" 
      />
      <div style="margin-left: 16px; width: 48px; ">{{ opacity}}%</div>
      <!-- <InputNumber :controls="false"  v-model:value="opacity" :formatter="formatter" :parser="parser"  :min="0" :max="100" style="margin-left: 16px; width: 48px; height: 30px;" /> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'

import { Slider, InputNumber } from 'ant-design-vue'

const slidesStore = useSlidesStore()
const { handleElement } = storeToRefs(useMainStore())

const opacity = ref<any>(100)
const inputValue1 = ref<any>(1)
const   formatter=(opacity: any) =>{
      return `${opacity}%`;
    }
 const    parser=(opacity:any) => {
      return opacity.replace('%', '');
    }
watch(handleElement, () => {
  if (!handleElement.value) return
  // 把0-1转换成0-100
  function convertToScaledValue(value:any) {
  return Math.round(value * 10) * 10;
}
  
  opacity.value = 'opacity' in handleElement.value && handleElement.value.opacity !== undefined ? convertToScaledValue(handleElement.value.opacity) : 1

  
}, { deep: true, immediate: true })

const { addHistorySnapshot } = useHistorySnapshot()

const updateOpacity = (value: any) => {
  if (!handleElement.value) return
    // 把0-100转换成0-1
  value  = ( value  / 100).toFixed(1)
  value =  value == 0.0 ?  Math.floor(value) : value 
  const props = { opacity: value }
  slidesStore.updateElement({ id: handleElement.value.id, props })
  addHistorySnapshot()
}
</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.slider {
  flex: 2;
}

.ant-input-number-focused .ant-input-number-input {
  padding-right: 32px; // 保证 % 符号不会覆盖输入框中的内容
}
::v-deep .ant-input-number-input {
     width: 100%;
     padding-right: 32px;  
    height: 30px;
    padding: 0 7px;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: 2px;
    outline: 0;
    transition: all 0.3s linear;
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
::v-deep .ant-slider-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    background-color: #fff;
     border: solid 2px #fff; 
    border-radius: 50%;
    box-shadow: 0;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
::v-deep .ant-slider:hover .ant-slider-track {
  background-color: #0DAEFF; /* 设置鼠标悬浮时的颜色 */
}
::v-deep .ant-slider-handle {
  background-color: #0DAEFF; /* 设置拖动柄的颜色 */
}
::v-deep .ant-slider-track {
  background-color: #0DAEFF; /* 设置拖动时的颜色 */
}
.ant-input-number-input-wrap:after {
  content: '%';
  position: absolute;
  right: 10px;
  top: 9px;
  font-size: 14px;
}
</style>